<template lang="html">
  <div class="header_box">
    <header-title :titlemain='title'></header-title>
    <div class="information">
      <div class="information_box">
        <img :src="xinxi.avatar">
        <h2>{{xinxi.user_nicename}}</h2>
        <p>{{xinxi.tel}}</p>
        <h3><span>签到</span><i></i></h3>
        <router-link to="/gerenaccount">账号管理<i></i></router-link>
      </div>
    </div>
  </div>
</template>
<script>
import title from "./header_title.vue";
export default {
  props:['xinxi'],
  data () {
    return {
      title:"个人中心"
    }
  },
  components:{
   'header-title':title
  }
}
</script>
<style scoped lang="less">
@import '../../../assets/less/index.less';
.header_box {
  width: 100vw;
  .information{
    width: 100vw;
    height: 33.333vw;
    background-image: url('../../../assets/img/banner/beijing.png');
    background-repeat: no-repeat;
    background-size: 100vw 33.33vw;
    background-position: center; 
    background-color: @color1;
    color: @color1;
    .information_box{
      width: @width;
      height: 33.333vw;
      margin: 0 auto;
      position: relative;
      img,h2,h3,p,a{
        position: absolute;
      }
      img{
        width: 16vw;
        height: 16vw;
        border-radius: 50%;
        top: 8vw;
        left: 0;
      }
      h2,p{
        left: 17vw;
        width: 35vw;
        line-height: 5vw;
        .font_space(1);
        text-align: left;
      }
      h2{
        font-size: @h1_font_size;
        top: 11vw;
      }
      p{
        font-size: @h3_font_size;
        top: 17vw;
      }
      h3,a{
        right: 0;
      }
      h3{
        width: 23vw;
        font-size: @h3_font_size;
        top: 4vw;
        span{
          display: inline-block;
          height: 11.4vw;
          line-height: 11.4vw;
          float: left;
        }
        i{
          display: inline-block;
          .icon-fingerprint();
          margin-left: 2vw;
        }
      }
      a{
        top: 25vw;
        font-size: @h1_font_size;
        color: @color1;
        line-height: 4vw;
        height: 4vw;
        i{
          display: inline-block;
          .icon-gengduo();
          margin-left: 2vw;
        }
      }
    }
  }
}
</style>